<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            font-size: 30px;
        }
    </style>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/02.css">
    <style>
        #p-color-2{
            color: green;
        }
        div{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <ol>
        <li>
            html+css+js语言体系形成后，页面开发也需要进行代码分解 <br>
            <ul>
                <li>.html 文件在设计标准只用于存放页面标签，构建页面结构</li>
                <li>.css 文件在设计标准只用于存放样式</li>
                <li>.js 文件在设计标准只用于存放脚本代码</li>
            </ul>
        </li>
        <li>
            css 的实际开发规则：
            <ul>
                <li>不使用行类样式进行样式开发（除非是JS控制样式覆盖）</li>
                <li>
                    如非必要不建议使用内联样式（除非是单页面独享覆盖样式）<br>
                    内联样式的 style 样式区域功能描述标签，只能定义在 head 标签中
                </li>
                <li>
                    样式开发只使用外联样式，但也许对外联样式进行文件拆分<br>
                    外联样式的 link 资源载入标签，只能定义在 head 标签中 <br>
                    如果外联样式以多 css 文件组成，link载入时需要注意载入顺序
                </li>
            </ul>
        </li>
    </ol>
    <hr>
    <p>全局的文字样式载入</p>
    <p>全局的文字样式载入</p>
    <p id="p-color">全局的文字样式载入</p>
    <p id="p-color-2">全局的文字样式载入</p>
    <p style="color: orange">全局的文字样式载入</p>
    <hr>
    <h4>载入顺序和样式优先级</h4>
    <h5>1. 定义方式优先级[选择器相同的情况下,使用就近原则]：</h5>
    <p>外联样式 = 内联样式 [取决于定义顺序] < 行类样式 【选择器相同】</p>
    <p>在开发规范中是要求 内联样式要晚于 外联样式定义,在该规范下内联样式优先一定高于外联样式</p>

    <div>测试样式优先级</div>

    <br>

    <h5>2. 选择器优先级：</h5>
    <!--
        标签选择器:通过标签名选择元素 => 标签名{}
        类选择器:通过标签 全局属性 class 描述的名字进行元素选择 => .类名{}
        id选择器:通过标签 全局属性 id 描述的取值进行元素选额 => #id值{}
    -->
    <p> 标签选择器 < 类选择器 < id选择器 < 行内样式 </p>

    <div class="diva" id="divb" style="color: darkorange">测试选择器优先级</div>

    <h5>3. 权重优先级[层级组合选择器+权重值计算结果进行比较+权重值是二进制计算]：</h5>
    <p> id选择器权重值为 100 ; 类选择器权重值为 10 ; 标签选择器权重值为 1 </p>
    <div class="divc">
        <div id="divd">权重测试</div>
    </div>

    <h5>4 . 破坏优先级 - 定义不允许覆盖的样式[会被同样定义的,权限更高的样式覆盖]</h5>
    <p>在对应的样式后以 !important 进行声明</p>
    <p style="color: blueviolet">测试!important</p>
</body>
</html>











